<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Echarts Map</title>
    <style>
        /* 引入本地字体 */
        @font-face {
            font-family: 'YouSheBiaoTiHei'; /* 自定义字体名称 */
            src: url('../ttf/YouSheBiaoTiHei.ttf') format('truetype'); /* 字体文件路径 */
        }
        html, body {
            width: 100%;
            height: 100%;
            resize: both;
            padding: 0;
            margin: 0;
        }
        #main {
            width: 100%;
            height: 100%;
            resize: both;
            overflow: auto;
        }
    </style>
    <script src="./lib/echarts.js"></script>
    <script src="./lib/axios.js"></script>
</head>
<body>
<div id="main"></div>
<script>
    var provinces; // 声明 provinces 变量
    var cityMap; // 声明 cityMap 变量
    var special = ['北京市', '天津市', '上海市', '重庆市', '香港特别行政区', '澳门特别行政区'];
    var myMapChart = echarts.init(document.getElementById('main'));
    var option = {
        backgroundColor: '#002242',
        title: {
            left: 'center',
            textStyle: {
                color: '#fff',
                fontSize: 16,
                fontWeight: 'bold',
                fontFamily: 'Microsoft YaHei'
            },
            subtextStyle: {
                color: '#ccc',
                fontSize: 16,
                fontWeight: 'bold',
                fontFamily: 'YouSheBiaoTiHei'
            }
        },
        tooltip: {
            trigger: 'item',
        },
        animationDuration: 1000,
        animationEasing: 'cubicOut',
        animationDurationUpdate: 1000
    };
    var markPointsData;

    window.addEventListener('resize', function() {
        myMapChart.resize(); // 调整图表大小
    });

    function init() {
        // 添加窗口大小变化的事件监听器

        // axios.get("./mapJSON/china.json").then(res => {
        //     let shengAll = getChildMap(res.data);
        //     echarts.registerMap('china', res.data);
        //     renderMap('china', shengAll);
        //     myMapChart.on('click', clickMap);
        //
        //     // 添加窗口大小变化的事件监听器
        //     window.addEventListener('resize', function() {
        //         myMapChart.resize(); // 调整图表大小
        //     });
        // });
    }


    function showMap(province, city, input, provinceMapData, cityMapData) {
        markPointsData = input;

        if (provinceMapData) {
            // 显示省级地图
            echarts.registerMap(province, provinceMapData);
            let shengAll = getChildMap(provinceMapData);
            renderMap(province, shengAll);
        } else {
            console.error("省级地图数据不存在: " + province);
        }

        if (city && cityMapData) {
            // 显示市级地图
            echarts.registerMap(city, cityMapData);
            let shiAll = getChildMap(cityMapData);
            renderMap(city, shiAll);
        } else if (city) {
            console.error("市级地图数据不存在: " + city);
        }
    }

    function getChildMap(data) {
        let childMapAll = [];
        for (var i = 0; i < data.features.length; i++) {
            childMapAll.push({
                name: data.features[i].properties.name,
                value: 0
            });
        }
        return childMapAll;
    }

    function renderMap(map, data) {
        option.title.subtext = map;
        option.geo =  {
            map: map,
            zoom: 1,
            roam: false,
            itemStyle: {
                normal: {
                    areaColor: '#378ad2',
                    shadowColor: '#378ad2',
                    shadowOffsetX: 1,
                    shadowOffsetY: 2
                },
            }
        },
            option.series = [{
                name: map,
                type: 'map',
                mapType: map,
                roam: false,
                data: data,
                nameMap: {
                    china: '中国'
                },
                label: {
                    normal: {
                        show: true,
                        textStyle: {
                            color: '#999',
                            fontSize: 10,
                            fontFamily: 'YouSheBiaoTiHei'
                        }
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            color: '#fff',
                            fontSize: 13,
                            fontFamily: 'YouSheBiaoTiHei'
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        areaColor: {
                            type: "radial",
                            x: 0.5,
                            y: 0.5,
                            r: 0.9,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: "rgba(16, 84, 167, 1)", // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: "rgba(16, 84, 167, 0.2)", // 100% 处的颜色
                                },
                            ],
                            globalCoord: false, // 缺省为 false
                        },
                        borderColor: '#0022421'
                    },
                    emphasis: {
                        areaColor: 'darkorange',
                    },
                },
                markPoint: {
                    label: {
                        show: true,
                        color: '#ffffff',
                        position: 'top',
                        backgroundColor: "#4054d9",
                        padding: [2, 2],
                        borderColor: '#ffffff',
                        borderWidth: 1,
                        opacity: 0.8,
                        fontFamily: 'YouSheBiaoTiHei'
                    },
                    data: markPointsData.map((point, index) => ({
                        name: point.name, // 使用传入的厂站名称
                        symbol: 'image://./img/markpoint.png',
                        // symbol: 'path://M658.285714 365.714286q0-60.571429-42.857143-103.428571t-103.428571-42.857143-103.428571 42.857143-42.857143 103.428571 42.857143 103.428571 103.428571 42.857143 103.428571-42.857143 42.857143-103.428571zm146.285714 0q0 62.285714-18.857143 102.285714l-208 442.285714q-9.142857 18.857143-27.142857 29.714286t-38.571429 10.857143-38.571429-10.857143-26.571429-29.714286l-208.571429-442.285714q-18.857143-40-18.857143-102.285714 0-121.142857 85.714286-206.857143t206.857143-85.714286 206.857143 85.714286 85.714286 206.857143z', // 标记的形状
                        symbolSize: [20, 30], // 标记的大小
                        coord: point.coord, // 使用传入的经纬度
                        value: 100, // 可选，标记的值
                        label:{
                            formatter: point.name, // 使用传入的厂站名称作为标签内容
                        },
                        itemStyle: {
                            normal: {
                                color: '#4054d9'
                            },
                            emphasis: {
                                color: 'darkorange',
                                opacity: 1
                            }
                        }
                    }))
                }
            }];
        myMapChart.setOption(option);
    }
    init(); // 在 JSON 文件加载完成后初始化地图

    //设置主题颜色（暗色-蓝/亮色-绿）
    function setStyle(isDark = true){
        option.backgroundColor = isDark ? '#002242' : '#ffffff';
        option.series[0].itemStyle.normal.borderColor = isDark ? '#002242' : '#ffffff';
        option.series[0].itemStyle.normal.areaColor = isDark ?  {
            type: "radial",
            x: 0.5,
            y: 0.5,
            r: 0.9,
            colorStops: [
                {
                    offset: 0,
                    color: "rgba(16, 84, 167, 1)", // 0% 处的颜色
                },
                {
                    offset: 1,
                    color: "rgba(16, 84, 167, 0.2)", // 100% 处的颜色
                },
            ],
            globalCoord: false, // 缺省为 false
        } :   {
            type: "radial",
            x: 0.5,
            y: 0.5,
            r: 0.9,
            colorStops: [
                {
                    offset: 0,
                    color: "rgba(0, 101, 105, 1)", // 0% 处的颜色
                },
                {
                    offset: 1,
                    color: "rgba(0, 101, 105, 0.2)", // 100% 处的颜色
                },
            ],
            globalCoord: false, // 缺省为 false
        };
        option.series[0].markPoint.label.backgroundColor = isDark ? '#323c48' :'#006569';
        option.title.subtextStyle.color = isDark ? '#ffffff' :'#006569';
        option.geo.itemStyle.normal = isDark ? {
            areaColor: '#378ad2',
            shadowColor: '#378ad2',
            shadowOffsetX: 1,
            shadowOffsetY: 2
        }:{
            areaColor: '#70c3a4',
            shadowColor: '#70c3a4',
            shadowOffsetX: 1,
            shadowOffsetY: 2
        };
        myMapChart.setOption(option);
    }
</script>
</body>
</html>